import React, {Component} from 'react';
import {Map, List} from 'immutable';
import classNames from 'classnames';

import {Col, Icon} from 'antd';
import Sku from './sku-item';
import Image from 'components/Image'

export default class SpuItem extends Component {
    static defaultProps = {
        spu: Map()
    }


    constructor(props) {
        super(props);

        this.state = {
            unfold: false
        }
    }


    render() {
        const {spu} = this.props;
        const {unfold} = this.state;

        const hideState = classNames({
            hide: !unfold
        });

        const skuPrices = (spu.get('skuList') || List()).map(sku=>sku.get('salePrice'));
        let maxPrice = skuPrices.max();
        let minPrice = skuPrices.min();

        let priceContent = minPrice < maxPrice ? `${(minPrice || 0).toFixed(2)} - ${(maxPrice || 0).toFixed(2)}` : `${(maxPrice || 0).toFixed(2)}`;

        return (
            <div>
                <Col span={6}>
                    <div className="good-item" ref="SPUItem">
                        <div className="good-img"><Image width={200} height={200} src={spu.getIn(['images', 0])} alt={spu.get('title')}/></div>
                        <div className="good-info">
                            <h4>{spu.get('title')}</h4>
                            <p className="price">&yen;{priceContent}</p>
                            <p className="stock">库存：{spu.getIn(['stock', 'stock'])}</p>
                        </div>
                        <dv className="see-children">
                            <a href="javascript:;"><Icon type={unfold ? 'left' : 'right'}
                                                         className="font-16 t-grayer" onClick={()=>this.setFold()}/></a>
                        </dv>
                    </div>
                </Col>
                <div className={hideState}>
                    {
                        (spu.get('skuList') || List()).map((sku, index)=><Sku key={index} sku={sku}/>)
                    }
                </div>
            </div>
        )
    }


    setFold() {
        this.setState({
            unfold: !this.state.unfold
        })
    }
}